<!-- FilePreview.vue -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="file.name"
    width="70%"
    destroy-on-close
    class="file-preview-dialog"
  >
    <div class="file-preview-content">
      <!-- 图片预览 -->
      <div v-if="isImage" class="preview-container image-preview">
        <img :src="fileUrl" :alt="file.name" class="preview-image" />
      </div>
      
      <!-- PDF预览 -->
      <div v-else-if="isPdf" class="preview-container pdf-preview">
        <iframe :src="fileUrl" frameborder="0" class="preview-pdf"></iframe>
      </div>
      
      <!-- 文本预览 -->
      <div v-else-if="isText" class="preview-container text-preview">
        <pre class="preview-text">{{ textContent }}</pre>
      </div>
      
      <!-- 视频预览 -->
      <div v-else-if="isVideo" class="preview-container video-preview">
        <video controls class="preview-video">
          <source :src="fileUrl" :type="file.type">
          您的浏览器不支持视频播放
        </video>
      </div>
      
      <!-- 音频预览 -->
      <div v-else-if="isAudio" class="preview-container audio-preview">
        <audio controls class="preview-audio">
          <source :src="fileUrl" :type="file.type">
          您的浏览器不支持音频播放
        </audio>
      </div>
      
      <!-- 其他文件类型 -->
      <div v-else class="preview-container generic-preview">
        <div class="file-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="file-info">
          <p class="file-name">{{ file.name }}</p>
          <p class="file-size">{{ formatFileSize(file.size) }}</p>
          <p class="file-type">{{ file.type || '未知类型' }}</p>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="downloadFile">下载</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { Document } from '@element-plus/icons-vue';

const props = defineProps({
  file: {
    type: Object,
    required: true
  },
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible']);

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

const fileUrl = ref('');
const textContent = ref('');

// 文件类型检测
const isImage = computed(() => props.file.type?.startsWith('image/'));
const isPdf = computed(() => props.file.type === 'application/pdf');
const isText = computed(() => 
  props.file.type?.startsWith('text/') || 
  ['application/json', 'application/xml', 'application/javascript'].includes(props.file.type)
);
const isVideo = computed(() => props.file.type?.startsWith('video/'));
const isAudio = computed(() => props.file.type?.startsWith('audio/'));

// 文件大小格式化
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 下载文件
const downloadFile = () => {
  const a = document.createElement('a');
  a.href = fileUrl.value;
  a.download = props.file.name;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

// 处理文本文件内容
const loadTextContent = async () => {
  if (isText.value) {
    try {
      const response = await fetch(fileUrl.value);
      textContent.value = await response.text();
    } catch (error) {
      console.error('加载文本内容失败:', error);
      textContent.value = '无法加载文件内容';
    }
  }
};

onMounted(() => {
  // 创建文件URL
  fileUrl.value = URL.createObjectURL(props.file);
  
  // 如果是文本文件，加载内容
  if (isText.value) {
    loadTextContent();
  }
});

// 组件销毁时释放URL
onUnmounted(() => {
  if (fileUrl.value) {
    URL.revokeObjectURL(fileUrl.value);
  }
});
</script>

<style scoped>
.file-preview-dialog :deep(.el-dialog__body) {
  padding: 10px;
}

.file-preview-content {
  width: 100%;
  height: 60vh;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.preview-pdf {
  width: 100%;
  height: 100%;
  border: none;
}

.preview-text {
  width: 100%;
  height: 100%;
  background: #f6f8fa;
  color: #24292e;
  padding: 15px;
  overflow: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  border-radius: 6px;
}

.preview-video, .preview-audio {
  max-width: 100%;
}

.generic-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.file-icon {
  font-size: 80px;
  color: #409EFF;
}

.file-info {
  text-align: center;
}

.file-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.file-size, .file-type {
  color: #606266;
  margin: 5px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
</style> 